<%--
  User: yealove
  Date: 14-10-12
  Time: 下午5:04
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <c:import url="../common/include.jsp"/>
    <title>菜单编辑</title>
</head>
<body>
<div class="container">
    <div class="row form-inline">
        <div class="col-xs-3 input-group col-xs-offset-1">
            <div class="input-group-addon">添加商家</div>
            <input type="text" id="shopName" class="form-control">
        </div>
        <div class="col-xs-1  input-group">
            <input type="button" class="btn btn-info btn-xs" value="添加" onclick="addShop()">
        </div>
    </div>
    <hr/>
    <div class="row form-inline">
        <div class="col-xs-3 input-group col-xs-offset-1">
            <div class="input-group-addon">商家</div>
            <select class="form-control" id="shopId">
                <c:if test="${shops != null}">
                    <c:forEach items="${shops}" var="shop" varStatus="s">
                        <option value="${shop.id}">${shop.name}</option>
                    </c:forEach>
                </c:if>
                <c:if test="${shops == null}">
                    <option id="-1">无</option>
                </c:if>
            </select>
        </div>
        <div class="col-xs-2 input-group">
            <div class="input-group-addon">菜名</div>
            <input type="text" id="menuName" class="form-control">
        </div>
        <div class="col-xs-1 input-group">
            <div class="input-group-addon">价格</div>
            <input type="text" id="price" class="form-control" style="width: 60px" onkeyup="this.value=this.value.replace(/[^\d]*/g, '')">
        </div>
        <div class="col-xs-2 input-group">
            <div class="input-group-addon">规则</div>
            <input type="text" id="condition" class="form-control" onkeyup="this.value=this.value.replace(/[^0123456]*/g, '')" maxlength="7">
        </div>
        <div class="col-xs-1  input-group">
            <input id="addMenu" type="button" class="btn btn-info btn-xs" value="添加">
        </div>
    </div>
    <div style="height: 10px"></div>
    <div class="row">
        <div class="col-xs-6 col-md-6 col-xs-offset-1">
            <div class="row table-responsive" id="menus">
                <table class="table table-hover table-condensed">
                    <tr>
                        <th>名称</th>
                        <th>价格</th>
                        <th>规则</th>
                        <th>操作</th>
                    </tr>
                    <c:if test="${menus != null}">
                        <c:forEach items="${menus}" var="menu" varStatus="s">
                            <tr>
                                <td>${s.index+1}</td>
                                <td>${menu.name}</td>
                                <td>${menu.price}</td>
                                <td>
                                    <a href="javascript:;">修改</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>
                    <c:if test="${menus == null}">
                        <tr>
                            <td colspan="4" style="text-align: center">无记录</td>
                        </tr>
                    </c:if>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function () {

        var ruleTip;
        $("#condition").focus(function () {
            ruleTip = layer.tips("填0-6，表示周日到周六。如果没有填则默认0-6。"
                    , "#condition"
                    , {style: ['background-color:#c00; color:#fff', '#c00'], maxWidth: 130});
        }).blur(function () {
            layer.close(ruleTip);
        })

        $("#addMenu").click(function () {
            var shop = $("#shopId").val();
            if(shop == '') {
                layer.tips("获取商家编号失败，请刷新页面！", "#shopId");
                return;
            }
            var menuName = $("#menuName").val();
            if(menuName == '') {
                layer.tips("请输入菜名！", "#menuName");
                $("#menuName").focus();
                return;
            }
            var price = $("#price").val();
            if(price == '') {
                layer.tips("请输入价格！", "#price");
                $("#price").focus();
                return;
            }
            var condition = $("#condition").val();
            if(condition == '') {
                condition = "1234560";
            }

            var url = "${ctx}/lunchparty/addMenu.do";
            var data = "name=" +  encodeMe(menuName) + "&price=" + encodeMe(price) + "&condition=" + encodeMe(condition) + "&shop=" + encodeMe(shop);
            $.ajax({
                url: url, data: data, success: function (data) {
                   alertM(data,  "添加新菜成功！", "添加新菜失败！");
                }
            });

        })

    })

    addShop = function () {
        var url = "${ctx}/lunchparty/addShop.do";
        var data = "name=" + encodeMe($("#shopName").val());
        $.ajax({
            url: url, data: data, success: function (data) {
                if (data) {
                    location.reload();
                }
            }
        });
    };

    $('#shopId').change(function () {
        var url = "${ctx}/lunchparty/getShopMenus.do";
        $.ajax({url: url, dataType: "json", data: "id=" + $(this).val(), success: function (data) {
            laytpl($("#menuList").html()).render(data, function (html) {
                $("#menus").html(html);
            });
        }});
    });
    $('#shopId').click(function(){
        $('#shopId').trigger("change");
    })
    $('#shopId').trigger("change");

    delMenu = function(id) {
        $.ajax({
            url: '${ctx}/lunchparty/delMenu.do'
            , data: 'id=' + id
            , success: function(data) {
                if(data == 'success') {
                    $('#shopId').trigger("change");
                } else {
                    layer.msg("删除失败，请刷新后重试...");
                }
            }
        })
    }
</script>
<script id="menuList" type="text/html">
    <table class="table table-hover table-condensed">
        <tr>
            <th>名称</th>
            <th>价格</th>
            <th>规则</th>
            <th>操作</th>
        </tr>
        {{#
        if(d.length>0) {
        for(var i=0, n=d.length; i
        <n
        ; i++) {
        }}
        <tr>
            <td>{{ d[i].name }}</td>
            <td>{{ d[i].price }}</td>
            <td>{{ d[i].condition }}</td>
            <td><a href="javascript:;" onclick="delMenu({{d[i].id}})">删除</a></td>
        </tr>
        {{#
        }
        } else {
        }}
        <tr>
            <td colspan="3" style="text-align: center">无</td>
        </tr>
        {{#
        }
        }}
    </table>
</script>
</body>
</html>